<template>
  <div style="display: flex">
    <div style="min-width: 20%;max-height: 500px;overflow:auto;border-right: 5px solid #eeeeee">
      <el-tree :data="data" :props="defaultProps"  @node-click="handleNodeClick"></el-tree>
    </div>
    <el-container>
      <div style="height: 50px;display: flex;margin-left: 20px">
        <el-input
          prefix-icon="el-icon-search"
          placeholder="商品名称"
          style="width: 200px;text-align: center"
          v-model="productName"
        ></el-input>
        <div>
          <el-button style="margin-left: 10px" icon="el-icon-search" type="primary" :loading="queryClicked" @click="queryClick">查询
          </el-button>
          <el-button style="margin-left: 10px" icon="el-icon-refresh-right" type="info" @click="resetClick">
            重置
          </el-button>
        </div>
      </div>
      <div class="product_content">
        <div class="product_item" v-for="item in productData">
          <div class="left_top" v-if="item.isClick==true"><span class="iconfont" style="color: black">&#xe66e;</span></div>
          <img :src="item.thumbnail" class="product_image"></img>
          <div class="product_name">
            {{item.name}}
          </div>
          <div class="price_content">
            <div class="addClick" @click="addProduct(item)"><span class="iconfont" style="font-size: 10px;color: white">&#xe620;</span></div>
            <div style="display: flex;flex-direction: column">
              <span style="color: red;display: block;font-size: 12px">成本价:{{item.cost}}</span>
              <span style="color: red;font-size: 12px">销售价:{{item.price}}</span>
            </div>
          </div>
        </div>
      </div>
      <el-footer class="el-footerBox">
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="loadProduct"></pagination>
      </el-footer>
      <div style="display: flex;justify-content: flex-end;align-items: center">
        <el-button type="primary" @click="addClick">完成</el-button>
      </div>
    </el-container>
  </div>
</template>
<script>
  import {productList} from '@/api/product'
  import {list as productCategoryList} from '@/api/productCategory'
  import Pagination from '@/components/Pagination';

  export default {
    data() {
      return {
        sn:'',
        productName:'',
        queryClicked:false,
        productData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        productCategory: '',
        defaultProps: {
          children: 'childrens',
          label: 'name'
        },
        data: [],
        chooseData: [],
        curHeight: null
      }
    },
    watch: { // 只要路由发生变化就重新获取数据
      chooseData(newVal, oldVal){
        if (newVal){
          for (var i=0;i<this.chooseData.length;i++){
            for (var k=0;k<this.productData.length;k++){
              if (this.chooseData[i].id===this.productData[k].id){
                this.productData[k].isClick=true
              }
            }
          }
        }
      }
    },
    components: {Pagination},
    created() {
      this.loadProduct();
      this.loadProductCategoryList()
    },

    mounted() {
      this.comeIn();
      this.beforeMount()
    },

    filters: {},
    methods: {
      comeIn() {
        console.log('222')
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        this.curHeight = h - 400//减去页面上固定高度height
      },
      resetClick(){
        this.productName=''
        this.sn=''
        this.loadProduct()
      },
      addProduct(data){
        this.$message({ type: 'success', message: '添加成功' })

        this.chooseData.push(data)
        console.log(this.chooseData)
      },
      beforeMount() {
        var _this = this
        window.onresize = () => {
          return (() => {
            var h = document.documentElement.clientHeight || document.body.clientHeight;
            this.curHeight = h - 400//减去页面上固定高度height
          })();
        };
      },
      //商品list
      loadProduct() {
        var _this = this
        let params = new URLSearchParams();
        // params.append('sn',this.sn)
        params.append('keyword',this.productName)
        params.append('pageNum', _this.pageNum);
        params.append('pageSize', _this.pageSize);
        params.append('productCategoryId', _this.productCategory);
        productList(params).then(response => {
          response.data.data.forEach(item=>{
            item.isClick=false
          })

          _this.productData = response.data.data
          console.log(this.productData)
          for (var i=0;i<this.chooseData.length;i++){
            for (var k=0;k<this.productData.length;k++){
              if (this.chooseData[i].id===this.productData[k].id){
                this.productData[k].isClick=true
              }
            }
          }
          _this.total = response.data.total
        }).catch(error => {
          console.log('error!!')
        });
      },
      queryClick() {
        this.queryClicked=true
        setTimeout(()=>{
          this.queryClicked=false
        },300)
        this.loadProduct()
      },
      //商品分类list
      loadProductCategoryList() {
        var _this = this
        let params = new URLSearchParams();
        productCategoryList(params).then(response => {
          _this.data = response.data
          let tree={
            id:'',
            name:'所有分类'
          }
          _this.data.unshift(tree)
        }).catch(error => {
          console.log('error!!')
        });
      },
      //过滤商品
      handleNodeClick(data) {
        this.productCategory = data.id
        this.loadProduct()
      },

      //切换分页保留选择
      getRowKeys(row) {
        return row.id
      },
      //双击添加商品
      doubleClick(val) {
        this.$emit('doubleClick', val)
      },
      //关闭删除选择
      cancelClick() {
        this.$refs.table.clearSelection()
      },
      //选择添加商品
      addClick() {
        this.$emit('addProductClick', this.chooseData)
        this.$confirm('确定复制并导入商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('copyClick')
          this.$emit('productClose')
        })

      }
    }
  }
</script>

<style scoped>
  .product_name{
    width: 100px;
    height: 45px;
    padding: 5px;
    overflow: hidden;
    text-overflow:ellipsis;
    /*white-space: nowrap;*/

    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
  }
  .addClick{
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #F56C6C;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .price_content{
    height: 30px;
    margin: 5px;

    padding-right: 5px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-end;
    /*width: 100%;*/
  }
  .product_item{
    position: relative;
    background-color: white;
    width: 120px;
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .product_image{
    width: 120px;
    height: 80px;
    vertical-align:middle;
    overflow: hidden;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
  }

  .product_content{
    height: 400px;
    justify-content: space-between;
    width: 100%;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background-color: #f3f4f6;

  }
  .el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
  }
  .left_top{
    height: 20px;
    border-bottom-left-radius: 5px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    top: 0;
    right: 0;
  }
</style>
